import Vue from 'vue'
import Router from 'vue-router'
import { getDeviceType } from '../utils/device'

Vue.use(Router)

const Home = () => import('../views/Home.vue')
const Mobile = () => import('../views/Mobile.vue')
const DevApp = () => import('../views/DevApp.vue')
const Tablet = () => import('../views/Tablet.vue')

const router = new Router({
	mode: 'hash',
	routes: [
		{ path: '/', component: Home },
		{ path: '/mobile', component: Mobile },
		{ path: '/dev', component: DevApp },
		{ path: '/tablet', component: Tablet }
	]
})

// Redirect root based on device type and preserve query params
router.beforeEach((to, from, next) => {
	if (to.path === '/') {
		const device = getDeviceType()
		const query = to.query || {}
		if (device === 'mobile') return next({ path: '/mobile', query })
		if (device === 'tablet') return next({ path: '/tablet', query })
		return next({ path: '/dev', query })
	}
	next()
})

export default router


